<template>
  <view class="new-beauty-content" @click="toDetail(info)" >
    <view class="date-card">
      <text class="date-text">{{info.date}}</text>
    </view>
    <view class="weiyu-card">
      <text class="weiyu-text">{{info.weiyu}}</text>
    </view>
    <view class="image-card">
      <image class="head-image" :src="info.head_image"></image>
    </view>
    <scroll-view class="news-list-scroll"  scroll-y>
      <view class="news-item" v-for="(item,index) in info.news" :key="index">
        <text class="news-text" >{{item}}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				info: {
					date: "",
					news: [],
					weiyu: "",
					image: "",
					head_image: ""
				},
			}
		},
		onLoad() {
			this.getData()

		},
		methods: {

			getData() {
				uni.request({
					url: 'https://v2.alapi.cn/api/zaobao', //仅为示例，并非真实接口地址。
					data: {
						"token": "qlVquQZPYSeaCi6u",
						"format": "json"
					},
					success: (res) => {
						this.info = res.data.data
						console.log(this.info)
					}
				});
			},
			toDetail(item) {
				uni.navigateTo({
				  url: "/pages/detail/detail?image="+item.image
				})
			}
			

		},

	}
</script>

<style>
	.new-beauty-content {
	  background-color: #fafafa;
	  padding: 20px;
	  height: 100vh; /* 设置容器高度为视口高度，确保滚动正常 */
	}
	
	.date-card {
	  background-color: #fff;
	  padding: 15px;
	  border-radius: 8px;
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}
	
	.date-text {
	  font-size: 36rpx;
	  color: #666;
	}
	
	.weiyu-card {
	  background-color: #fff;
	  padding: 15px;
	  border-radius: 8px;
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	  margin-top: 20px;
	}
	
	.weiyu-text {
	  font-size: 32rpx;
	  color: #777;
	}
	
	.image-card {
	  margin-top: 20px;
	}
	
	.head-image {
	  width: 100%;
	  border-radius: 10px;
	}
	
	.news-list-scroll {
	  margin-top: 20px;
	  height: auto; /* 根据内容自动调整高度 */
	}
	
	.news-item {
	  background-color: #fff;
	  padding: 15px;
	  border-radius: 8px;
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	  margin-bottom: 15px;
	}
	
	.news-text {
	  font-size: 30rpx;
	  color: #888;
	}
</style>